<template>
    <div class="chart-box">
        <div class="chart-box-header">
            <div class="chart-box-title">{{ title }}</div>
        </div>
        <div class="chart-box-body">
            <slot name="body" />
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: String,
});
</script>

<style lang="scss" scoped>
.chart-box {
    //min-width: 250px;
    flex: auto;
    background-color: #fbfbfd;
    margin-bottom: 12px;
    border-radius: 4px;
    box-shadow: 1px 1px 20px 2px rgba(#eee, 0.4);
    .chart-box-header {
        padding: 16px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc3;
        // text-align: center;
    }
    .chart-box-title {
        position: relative;
        text-indent: 10px;
        font-weight: bold;
        font-size: 16px;
        // &::before {
        //     content: "";
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     width: 4px;
        //     height: 100%;
        //     border-radius: 4px;
        //     background-color: #1890ff;
        // }
    }
    .chart-box-body {
        padding: 8px;
        padding-top: 10px;
        display: flex;
        // justify-content: center;
    }
}
</style>